<template>
	<view style="background: #f2f2f2;">
		<view class='content-wrap'>
		  <view class='top-bg'>
		    <view class="top-info">
		      <view @tap='bindSelectAddress' class='address'>
		        <block v-if="address">
		         <view class='address-info'>
		           <view><text class='iconfont icon-dizhi'></text></view>
		           <view class='middle'> 
		              <view class='name-phone'><view>{{address.call_name}}</view><view>{{address.phone}}</view></view>
		              <view>收货地址：{{address.school}}{{address.detail}}</view>
		           </view>
		          </view>
		          <view class='address-icon'><text class='iconfont icon-gengduo'></text></view>
		        </block>
		        <block wx:else>
		          <view class='info'><text class='iconfont icon-dizhi'></text>您当前还没有地址,赶快添加吧</view>
		           <view class='info-icon'><text class='iconfont icon-gengduo'></text></view>
		        </block>
		      </view>
		    </view>
		  </view>
		
		
		  <view class='goods-list'>
		    <view class='title'>购买清单</view>
		     <block v-for="(item,index) in goodsList" :key="item.id">
		      <view class="item">
		        <view class='name-img'>
		          <view><image :src='root_url + item.thumb'></image></view>
		          <view class='goods-name'>{{item.name}}</view>
		        </view>
		        <view class='count-price'>
		          <view class='count'>×{{item.count}}</view>
		          <view>￥{{item.price}}</view>
		        </view>
		      </view>
		    </block> 
		    <view class='tip'>
		      <view>提示：确认查看购买清单</view>
		      <view>共{{total_num}}件商品:￥{{total_price}}</view>
		    </view>
		  </view>
		
		 
		
		
		  <view class='deliver-message'>
		   <view class='message'>
		    <view>买家留言:{{ message }}</view>
		    <input v-model="message" type='text' placeholder='有什么想对商家说的可以写在这里哦'></input>
		   </view>
		  </view>
		
		</view>
		
		<view class='btn-wrap'>
		  <view class='total-price'>
		    应付总额:<text>￥{{realPrice}}</text>
		    <text v-if="orderFee !=0" class='send_fee'>配送费{{orderFee}}</text>
		  </view>
		  <view @tap='bindAddOrder' class='btn-save'>提交订单</view>
		</view>
	</view>
</template>

<script>
	import tools from '@/static/utils/tools.js'
	var userInfo = '';
	export default {
		data() {
			return {
				shop_id :0,
				root_url:this.root_url,
				address:'',
				message:'',
				goodsList:[],
				total_num:0,
				total_price:0,
				realPrice:0,
				orderFee:0,
			}
		},
		
		onLoad(options) {
			this.shop_id = options.shop_id;
			var that = this;
			userInfo = uni.getStorageSync('userInfo');
			var user_id = 4829;//userInfo.id
			uni.showLoading({ title: '加载中', mask: true });
			//获取购物车信息
			tools.httpClient('get','index.php?c=shop&a=getConfrimOderData', { shop_id: this.shop_id,user_id:user_id }, (res) => {
			  console.log(res, 22)
			 
			    that.goodsList   = res.data.subList
			    that.total_num   = res.data.total_num
			    that.total_price = parseFloat(res.data.total_price)
			    that.realPrice   = (parseFloat(res.data.total_price) + parseFloat(res.orderFee)).toFixed(2)
			    that.orderFee    = parseFloat(res.orderFee)
			  
			  
			  uni.hideLoading()
			});
		},
		methods: {
			
			//收获地址
			bindSelectAddress(){
				uni.navigateTo({
					url :'../../address/list/list'
				})
			}
		}
	}
</script>

<style>

.content-wrap{
  padding-bottom: 80px;
}
.top-bg{
  background: #ff0000;
  height: 70px;
  position: relative;
  display: flex;
  justify-content: center
}
.top-bg .top-info{
  border-radius: 5px;
  width: 95%;
  position: absolute;
  background: #fff;
  padding-bottom: 20px;
}
.top-bg .top-info .title{
  display: flex;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #e4e4e4;
}
.top-bg .top-info .title>view{
   width: 50%;
  text-align: center;
}
.top-bg .top-info .title .active text{
  color: #ff0000;
  border-bottom: 1px solid #ff0000;
  display: inline-block;
  height: 35px;

}

.top-info .address{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  color: #999;
  padding: 0 8px;
}
.top-info .address .address-info{
  flex: 1;
  display: flex;
}
.top-info .address .address-info .middle{
   flex: 1;
}
.top-info .address .address-info .name-phone{
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
}
.top-info .address .address-icon{
  display: flex;
  align-items: center;
}
.top-info .address .info{
  
}
.pay-wrap .time{
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  border-bottom: 1px solid #e4e4e4;
}

.goods-list{
  background: #fff;
  border-radius: 5px;
  padding: 0 8px;
  width: 95%;
  margin: 30px auto 0 auto;
}
.goods-list .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}
.goods-list .item>view{
  display: flex;
  align-items: center;
}
.goods-list .title{
  padding: 3px 0;
  border-bottom: 1px solid #e4e4e4;
}
.goods-list .item image{
  width: 40px;
  height: 40px;
}
.goods-list .goods-name{
  padding-left: 10px;
}
.goods-list .count{
  padding-right: 20px;
  color: #666
}
.goods-list .tip{
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.deliver-message{
  background: #fff;
  margin-top: 10px;
}
.deliver-message .time {
  display:flex;
  justify-content:space-between;
  height:40px;
  line-height:40px;
  padding:0 10px;
  border-bottom:1px solid #e4e4e4;
}

.deliver-message .deliver{
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid #e4e4e4;
}
.deliver-message .message{
  display: flex;
  align-items: center;
  padding: 5px 10px;
}
.deliver-message .message >view{
  padding-right: 5px;
}
.deliver-message .message input{
  flex: 1;
}

.pay-wrap{
  margin-top: 10px;
}
.pay-wrap>view{
  padding: 10px 10px;
  display: flex;
  align-items: center;
  background: #fff;
}
.pay-wrap .title{
  margin-top: 8px;
}
.pay-wrap .title text{
  display: inline-block;
  padding-right: 5px;
}

.pay-wrap .pay-item{
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e4e4e4;
}
.pay-wrap .pay-item .title text{
  display: inline-block;
  padding-right: 10px;
}

.btn-wrap{
  width: 100%;
  display: flex;
  height: 50px;
  line-height: 50px;
  background: #fff;
  position: fixed;
  bottom: 0;
}
.btn-wrap .total-price{
  flex: 1;
  padding-left: 5px;
}
.btn-wrap .total-price text:first-of-type{
  color: #ff0000;
  font-size: 20px;
}
.btn-wrap .total-price .send_fee{
  font-size: 24rpx;
  color: #666;
  display: inline-block;
  padding-left: 10px;
}
.btn-wrap .btn-save{
  background: #ff0000;
  color: #fff;
  width: 30%;
  text-align: center;
}
</style>
